<template>
  <div class="container">
    <p class="title">
      我的消息
    </p>
    <div style="width: 60%;margin: 0 auto;">
      <el-switch
        v-model="isRead"
        active-text="未读消息"
        inactive-text="已读消息"
        :active-value="1"
        :inactive-value="0"
        style="float: right;"
        @change="handleSwitch"
      />
    </div>

    <div v-if="isRead === 1">
      <el-card
        v-for="item in messages"
        :key="item.id"
        v-loading="loading"
        class="box-card"
        element-loading-background="rgba(255, 255, 255, 1)"
      >
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
          <img src="../../assets/icons/关闭.png" alt="close" style="float: right; padding: 3px 0;height:20px;cursor: pointer;" @click="handleRead(item.id)">
        </div>
        <div class="text item">
          {{ item.msg }}
        </div>
        <div class="footer item">
          <p v-if="item.type === 1">
            公告人：{{ item.content.meeting.sponsorDetail.name }}
          </p>
          <p v-if="item.type === 1">
            {{ item.createtime | parseTime('{y}年{m}月{d}日') }}
          </p>
          <el-button v-if="item.type === 2" type="primary" @click="handleAgree(item.id, item.content.id)">
            同意
          </el-button>
          <el-button v-if="item.type === 2" type="danger">
            拒绝
          </el-button>
          <el-button v-if="item.type === 4 && !item.content.state" type="text" @click="handleInfo(item.content.id)">
            会议详情
          </el-button>
        </div>
      </el-card>
    </div>
    <div v-else>
      <el-card v-for="item in messages2" :key="item.id" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
          <img src="../../assets/icons/关闭.png" alt="close" style="float: right; padding: 3px 0;height:20px;cursor: pointer;">
        </div>
        <div class="text item">
          {{ item.msg }}
        </div>
        <div class="footer item">
          <p v-if="item.type === 1">
            公告人：{{ item.content.meeting.sponsorDetail.name }}
          </p>
          <p v-if="item.type === 1">
            {{ item.createtime | parseTime('{y}年{m}月{d}日') }}
          </p>
          <el-button v-if="item.type === 2" type="primary" @click="handleAgree(item.content.id)">
            同意
          </el-button>
          <el-button v-if="item.type === 2" type="danger" @click="handleRead(item.id)">
            拒绝
          </el-button>
          <el-button v-if="item.type === 4 && !item.content.state" type="text" @click="handleInfo(item.content.id)">
            会议详情
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { findMessage, readMessage, readedMessage } from '@/api/message'
import { acceptInvitation } from '@/api/meetingMember'
import { parseTime } from '@/utils'

export default {
  filters: {
    parseTime(time, cFormat) {
      const date = new Date(time)
      return parseTime(date, cFormat)
    }
  },
  data() {
    return {
      messages: [],
      messages2: [],
      isRead: 1,
      loading: false
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    async getMessage() {
      const res = await findMessage()
      this.messages = res.data.data
      this.handleMessage(this.messages)
    },
    async getReadedMsg() {
      const res = await readedMessage()
      this.messages2 = res.data.data
      this.handleMessage(this.messages2)
    },
    handleMessage(msg) {
      msg.forEach(element => {
        element.content = JSON.parse(element.content)
        if (element.content.sponsorDetail) {
          element.sponsorName = element.content.sponsorDetail.name
        }
        switch (element.type) {
          case 1:
            element.title = '会议公告：'
            element.msg = `${element.content.notice.content}`
            break
          case 2:
            element.title = '会议邀请：'
            element.msg = `${element.sponsorName}邀请您，参与${parseTime(element.content.starttime, '{y}年{m}月{d}日{h}:{i}')}，在${element.content.room}会议室的会议。`
            break
          case 3:
            element.title = '退会通知：'
            element.msg = `${element.sponsorName}拒绝您参与${parseTime(element.content.starttime, '{y}年{m}月{d}日{h}:{i}')}，在${element.content.room}会议室的会议。`
            break
          case 4:
            element.title = '管理员通知：'
            element.msg = `${element.sponsorName}，于${parseTime(element.content.starttime, '{y}年{m}月{d}日{h}:{i}')}，在${element.content.room}会议室的会议${element.content.state ? '审核未通过' : '审核已通过'}。`
            break
          default:
            break
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 700)
    },
    async handleAgree(msgid, id) {
      // console.log(id)
      const res = await acceptInvitation(id)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '加入成功',
          type: 'success',
          duration: 2000
        })
        this.handleRead(msgid)
      }
    },
    handleInfo(id) {
      this.$router.push({ path: `/detailMine/${id}` })
    },
    handleSwitch() {
      this.loading = true
      this.isRead ? this.getMessage() : this.getReadedMsg()
    },
    async handleRead(id) {
      const res = await readMessage(id)
      if (!res.data.code) {
        this.getMessage()
      }
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 30px;
  letter-spacing: 16px;
  font-weight: 400;
  text-align: center;
}

.text {
  font-size: 18px;
  font-weight: 400;
  text-indent: 2em;
}

.footer {
  font-size: 18px;
  font-weight: 400;
  float: right;
  padding-right: 20px;
}

.footer p {
  margin-block-start: .5em;
  margin-block-end: 0;
  text-align: center;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 60%;
  margin: 35px auto;
  text-align: left;
  border: 3px solid #EAAD94;
  font-size: 22px;
  font-weight: 500;
}
</style>
